<template>
  <div class="home">
    <div class="header">
      <img class="hd" src="../assets/logo1.png" alt="">
      <button @click="del">退出</button>
    </div>
      <div class="box">
        <ul class="list">
          <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#304156" text-color="white" active-text-color="#3988da" :router="true">
          <el-menu-item  index="/" default-active>
            <em class="el-icon-house" style="margin-left: -5px;"></em>
            <span class="sp" slot="title">首页</span>
          </el-menu-item>
            <el-submenu index="/yhgl">         
              <template slot="title">
                <em class="el-icon-s-data" style="margin-left: -5px;"></em>
                <span slot="title">用户管理</span>
              </template>
              <el-menu-item index="/yhgl/yhlb">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">用户列表</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="/qxgl">         
              <template slot="title">
                <em class="el-icon-finished" style="margin-left: -5px;"></em>
                <span slot="title">权限管理</span>
              </template>
              <el-menu-item index="/qxgl/jslb">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">角色列表</span>
              </el-menu-item>
              <el-menu-item index="/qxgl/qxlb">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">权限列表</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="/spgl">         
              <template slot="title">
                <em class="el-icon-tickets" style="margin-left: -5px;"></em>
                <span slot="title">商品管理</span>
              </template>
              <el-menu-item index="/spgl/splb">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">商品列表</span>
              </el-menu-item>
              <el-menu-item index="/spgl/flcs">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">分类参数</span>
              </el-menu-item>
              <el-menu-item index="/spgl/spfl">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">商品分类</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="/ddgl">         
              <template slot="title">
                <em class="el-icon-football" style="margin-left: -5px;"></em>
                <span slot="title">订单管理</span>
              </template>
              <el-menu-item index="/ddgl/ddlb">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">订单列表</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="/sjtj">         
              <template slot="title">
                <em class="el-icon-mobile" style="margin-left: -5px;"></em>
                <span slot="title">数据统计</span>
              </template>
              <el-menu-item index="/sjtj/sjbb">
                <em class="el-icon-menu" style="margin-left: -13px;"></em>
                <span slot="title">数据报表</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </ul>
        <em :class="cl" @click="sq"></em>
        
        <el-breadcrumb style="display:inline-block;" separator="/">
        <el-breadcrumb-item v-for="x,i in breadList" :key="i" to="/">
          <span>{{ x.name }}</span>
        </el-breadcrumb-item>

        </el-breadcrumb>
        
        <div v-if="$route.path==='/'" class="welcome">
          <h1>welcome</h1>
          <img src="../assets/welcome.png" alt="">
        </div>
        <router-view></router-view>
      </div>
      
  </div>
</template>
<script>
  export default {
    data() {
              return {
                isCollapse: true,
                cl:'el-icon-s-fold',
                breadList: []
              }
        },
    beforeRouteEnter(to,from,next){
        if(sessionStorage.getItem('token')){
          next()
        }else{
          next('/login')
        }
        
    },
    watch:{
      $route(to,from){
        console.log(this.$route.matched);
        this.breadList = this.$route.matched;
      }
    },
    methods:{
      sq(){
        if(document.documentElement.getElementsByClassName('list')[0].style.width=='54px'){
          for(let i=0;i<document.documentElement.getElementsByTagName('li').length;i++){
           document.documentElement.getElementsByTagName('span')[i].style.display='inline-block'
        }
        this.cl='el-icon-s-fold'
        if(this.$route.path!='/'){
          document.querySelector('.rv').style.left='230px'
          document.querySelector('.rv').style.width='80vw'
        }
        
        document.documentElement.getElementsByClassName('list')[0].style.width='210px'
        }else{
          for(let i=0;i<document.documentElement.getElementsByTagName('li').length;i++){
           document.documentElement.getElementsByTagName('span')[i].style.display='none'
        }
        this.cl='el-icon-s-unfold'    
        if(this.$route.path!='/'){
          document.querySelector('.rv').style.left='74px'
          document.querySelector('.rv').style.width='90vw'
        }   
        document.documentElement.getElementsByClassName('list')[0].style.width='54px'
        }  
      },
      del(){
        sessionStorage.removeItem('token')
        this.$router.go('/login')
      }
    }
  }
</script>
<style scoped>
  .header{
    width: 100vw;
    height: 60px;
    background-color: #363D40;
    position: relative;
  }
  .header button{
    width: 60px;
    height: 30px;
    background-color: #909399;
    position: absolute;
    border:none;
    border-radius: 5px;
    right: 30px;
    top: calc(60px / 2 - 30px / 2);
    color: white;
    line-height: 30px;
    cursor: pointer;
  }
  .hd{
    width: 300px;
  }
  .list{
    width: 210px;
    height: calc(100vh - 60px);
    overflow-y: scroll;
    background-color: #304156;
    list-style: none;
    box-sizing: border-box;
    overflow-x:hidden ;
    display: inline-block;
    vertical-align: top;
    transition: all 0.5s;
  }
  .list::-webkit-scrollbar{
    width: 2px;
    color: black;
  }
  .el-menu-vertical-demo{
    border: none;
  }
  .el-icon-s-fold,.el-icon-s-unfold{
    width: 20px;
    height: 50px;
    margin: 0 15px;
    font-size: 20px;
    line-height: 50px;
    cursor: pointer;
  }
  .welcome{
    width: 80vw;
    display: inline-block;
    vertical-align: top;
    height: 80vh;
    text-align: center;
    margin-top: 40px;
    position: absolute;
    left: 200px;
  }
  .rv{
    width: 80vw;
    height: 80vh;
    top: 130px;
    left: 230px;
    vertical-align: top;
    transition: all 0.5s;
    position: absolute;
  }
  .welcome img{
    width: 600px;
  }
</style>